//navigation
$max-width-right-menu: 560px;
$min-width-right-menu: 220px;
$width-left-menu: 120px;
$width-right-menu-small: 380px;

.navbar{
	.container, .container-fluid{
		padding: 0 ($margin-container*0.5) 0 ($margin-container*0.5);
	}
	min-width: 300px;
	min-height: 70px;
	margin-bottom: 0;
	.navbar-header .navbar-brand{
		position: relative;
		margin-left: 0;
		padding: 0;
		.brand-name{
			float: left;
			font: 18px/20px "RobotoBold";
			padding: 24px 10px;
			color: $white;
			&:hover, &:focus{
				text-decoration: none;
			}
			&::after {
			   	display:block;
			    font-family: "RobotoBold";
			    content:attr(title);
			    height:1px;
			    color:transparent;
			    overflow:hidden;
			    visibility:hidden;
			    margin-bottom:-1px;
			}
		}
		.logo{
			float: left;
			margin-top: 15px;
			margin-right: 20px;
			@include size(15px, 41px);
			background: url(#{$assetsPath}/img/logo.png) no-repeat;
			background-size: 15px 41px;
			@include image-2x("#{$assetsPath}/img/logo-retina.png", 15px, 41px);
		}
	}
	.navbar-collapse{
		li{
			position: relative;
            
            .toggle-sized{
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                max-width: 190px;
            }

			&.active>a{
				@extend .add-transition;
				font-family: "RobotoBold";
				span{
					font-family: "RobotoLight";
				}
				& > .caret{
					border-top-color: $white;
				}
			}
			&>a{
				@extend %font-header;
				padding: 24px 5px;
				text-align: center;
				@extend .add-transition;
                &.icon-link{
                    &::after{
                        content: '_';
                    }
                }
				&.notifications{
					padding-left: 45px;
				}
				&:hover, &:focus{
					font-family: "RobotoBold";
					span{
						font-family: "RobotoLight";
					}
					& > .caret{
						border-top-color: $white;
					}
				}                
				.caret{
					@include absolute(31px, 10px);
					margin-left: 0;
					border-top: 8px solid rgba(255, 255, 255, 0.7);
					border-right: 5px solid transparent;
					border-left: 5px solid transparent;
				}
				&::after {
				    display:block;
				    font-family: "RobotoBold";
				    content:attr(title);
				    height:1px;
				    color:transparent;
				    overflow:hidden;
				    visibility:hidden;
				    margin-bottom:-1px;
				    padding: 0 5px;
				}
                .icon{
                    width: 1em;
                    height: 1em;
                    display: inline-block;
                    vertical-align: -0.125em;
                }
			}
			&.dropdown > a{
				padding-right: 25px;                
			}
			.dropdown-menu{
				margin-top: 1px;
				li{
					&.active {
						a{
							color: $white;
							font-family: "RobotoLight";
							border-radius: 0;
							&:hover, &:focus{
								background-color: $blue;
							}
						}
					}
					a{
						padding: 10px;
						text-align: left;
						color: $gray_text;
						@extend .add-transition;
						&:hover, &:focus{
							background-color: $gray-super-light;
							font-family: "RobotoLight";
						}
					}
				}
			}
			&.glow-animate{
				&>a:after{
					display: none;
				}
			}

		}
	}
	.btn-icon{
		padding: 0;
		margin: 21px 5px;
		color: #7e898f;
		.glyphicon{
			font-size: 22px;
			line-height: 22px;
		}
		&:hover, &:focus, &:active{
			color: #fff;
			background: transparent;
			border-color: transparent;
		}
	}
}
.navbar-default{
	.navbar-collapse ul li a, .navbar-header .navbar-brand{
		color: $gray_text;
	}
	.navbar-collapse li {
		&:hover a .caret, &:focus a .caret{
			border-top-color: $gray_text;
		}
		a .caret{
			border-top-color: $gray_light;
		}
	}
}
.badge.badge_nav{
	background-color: #2a81cb;
	border-radius: 100%;
	padding: 9px 0;
	@include absolute($top: 15px, $left: 5px);
	font-size: 16px;
	line-height: 20px;
	min-width: 38px;
	overflow: hidden;
    text-align: center;
}
.navbar-header {
	text-align: center;
	.badge.badge_nav,
	.btn-icon,
	.number-of-synchronized-interviews{
		display: none;
	}
}
.active-page{
	display: none;
	color: $white;
	font-family: "RobotoBold";
	font-size: 18px;
	line-height: 50px;
	white-space: nowrap;
    max-width: 55%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.interview-ID, .active-page{
	&:hover, &:focus, &:active{
		color: white;
		text-decoration: none;
	}
}
.navbar {
	.navbar-text,  .interview-ID{
		font: 18px/20px "RobotoBold" !important;
		padding: 24px 9px;
	}
}

.interview-ID{
	color: $white;
	display: inline-block;
}
.navbar-header{
	& > .interview-ID{
		display: none;
	}
}
.navbar-web-interview {
	.navbar-header{
		& > .interview-ID{
			display: none;
		}
	}
	.nav.navbar-left{
		max-width: $width-left-menu;
		overflow: hidden;
		li{
			max-width: 100%;
			.interview-ID{
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				
			}
		}
	}
	.nav.navbar-right{
	    // max-width: $max-width-right-menu;
		// min-width: $min-width-right-menu;
		& > li{
			float: right;
			&.help-link{
				max-width: 120px;
			}
			& > a{
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}
}
.navbar-text{
	white-space: nowrap;
	margin-bottom: 0;
	margin-top: 0;
    max-width: 55%;
    overflow: hidden;
    text-overflow: ellipsis;
	display: block;
	box-sizing: border-box;
}
.navbar-inverse .navbar-text{
	color: $white;
}
.language{
	background: url("#{$assetsPath}/img/language.png") 0 15px no-repeat;
	padding-left: 40px;
	max-width: 250px;
	min-width: 120px;
	& > a{
		white-space: nowrap;

		overflow: hidden;
		text-overflow: ellipsis;
	}
	.dropdown-menu{
		max-width: 350px;
		a{
			white-space: normal;
		}
	}
}
.navbar-web-interview {
	.in .nav.navbar-right{
		max-width: 100%;}
}
@media screen and (max-width: 1350px){
	.navbar-web-interview{
		.navbar-text{
			max-width: 55%;
		}
		.nav.navbar-right{
			//max-width: $width-right-menu-small;
		}
		.language{
			//max-width: 55%;
		}
	}
}
@media (max-width: $screen-md-min) {
	.navbar {
		.container, .container-fluid {
			padding: 0 ($margin-container-md-screen - 15px) 0 $margin-container-md-screen;
		}
	}
	.wide-navbar{
		.navbar{
			min-height: 60px;
			.container, .container-fluid {
				width: 100%;
				padding: 0 ($margin-container-md-screen - 15px) 0 $margin-container-md-screen;
			}
			.navbar-text{
					display: none;
				}
			.navbar-header{
				margin: 0;
				padding-top: 5px;
				.active-page{
					display: inline-block;
				}
				.navbar-brand{
					.logo{
						min-height: 41px;
						min-width: 15px;
						padding: 0;
						//transform: rotate(270deg);
					}
					.brand-name{
						display: none;
						&:after{
							display: none;
						}
					}
				}
				.badge.badge_nav{
					display: block;
					float: right;
					position: relative;
					top: 0;
					left: 0;
					margin: 5px 15px 5px 10px;
				}
				.number-of-synchronized-interviews{
					display: block;
					float: right;
					padding: 15px 10px;
					color: $white;
					&:hover, &:focus{
						text-decoration: none;
						color: white;
					}
				}
			}
			.navbar-toggle{
				z-index: 25;
				margin-right: 0;
			}
			&.navbar-fixed-top {
				.navbar-collapse{
					max-height: 100%;
					top: 0;
					left: 0;
					z-index: 10;
					display: none;
					position: fixed;
					@include size(100%, 100%);
					background: black;
					margin: 0;
					padding: 40px 5%;
					li {
						&.active a{
							color: white;
							&:hover, &:focus{
								background-color: rgba(255, 255, 255, 0.4);
							}
						}
						&> a{
							border-radius: 5px;
							padding: 15px 10px;
							text-align: left;
							color: $gray_light;
							&:hover, &:focus{
								color: white;
							}
						}
						a .caret{
							top: 0;
							left: 0;
							position: relative;
							margin: 0;
							margin-left: 10px;
						}
						.dropdown-menu li {
							a{
								padding: 15px 10px;
								&:hover, &:focus{
									font-family: "RobotoBold";
								}
							}
							&.active {
								a{
									border-radius: 5px;
									background-color: rgba(42, 129, 203, 0.5);
									&:hover, &:focus{
										font-family: "RobotoBold";
										background-color: rgba(42, 129, 203, 1);
									}
								}
							}
						}

					}
				}
				.navbar-right .badge.badge_nav{
					top: 0;
					left: 0;
					position: relative;
					margin-right: 10px;
				}
				.navbar-nav > .active > a,
				.navbar-nav > .active > a:hover,
				.navbar-nav > .active > a:focus{
					background-color: #333;
				}
			}
		}
		.icon-bar{
			@include transition();
		}
		.navbar-inverse .navbar-toggle{
			background-color: transparent;
			border: none;
		}
		.top-animate {
		@include rotate(225deg);
		position: relative;
		top: 6px;
		}
		.mid-animate { opacity: 0; }
		.bottom-animate {
			bottom: 6px;
			position: relative;
			@include rotate(-225deg);
		}
	}
}
@media (max-width: $screen-md-min) {
	.wide-navbar{
		.navbar-header {
			float: none;
			display: flex;
			width: 100%;
			flex-wrap: nowrap;

			.navbar-brand{
				order: 1;
				.logo{
					margin-top: 5px;
					//transform: rotate(270deg);
				}
			}
			& > .interview-ID{
				padding: 15px 9px;
				display: inline-block;
				order: 2;
				margin-left: auto;
				margin-right: auto;				
			}
			.btn-icon,
			.badge.badge_nav{
				display: block;
				float: none;
				position: relative;
				top: 0;
				left: 0;
				margin: 10px;
				order: 3;
			}
			.active-page{
				margin-left: auto;
				margin-right: auto;
			}
			.active-page,
			.number-of-synchronized-interviews{
				display: inline-block;
				order: 2;
			}
		}
		.navbar-left,.navbar-right {
			float: none !important;
		}
		.navbar-toggle {
			display: block;
			order: 4;
		}

		.navbar-collapse.collapse {
			display: none!important;
		}
		.navbar-nav {
			float: none!important;
		}
		.navbar-nav>li {
			float: none;
		}
		.collapse.in{
			display:block !important;
			height: 100% !important;
		}
		.navbar-nav .open .dropdown-menu {
			position: static;
			float: none;
			width: auto;
			margin-top: 0;
			background-color: transparent;
			border: 0;
			box-shadow: none;
		}
		.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
			color: #fff;
			background-color: transparent;
		}
		.navbar-web-interview .nav.navbar-right > li,
		.navbar-web-interview .nav.navbar-right > li.help-link,
		.navbar-web-interview .nav.navbar-left{
			width: 100%;
			max-width: 100%;
			text-align: left;
		}
	}
}
@media (max-width: ($screen-sm-min - 1) ){
	.language .dropdown-menu{
		max-width: 80%;
	}
	.navbar{
		min-height: 60px;
		.container, .container-fluid {
			width: 100%;
			padding: 0 ($margin-container-md-screen - 15px) 0 $margin-container-md-screen;
		}
		.navbar-text{
				display: none;
			}
		.interview-ID{
			padding: 15px 9px;
		}
		.navbar-header{
			margin: 0;
			padding-top: 5px;
			& > .interview-ID{
				padding: 15px 9px;
				display: inline-block;
			}
			.btn-icon,
			.badge.badge_nav{
				display: block;
				float: right;
				position: relative;
				top: 0;
				left: 0;
				margin: 10px;
			}
			.active-page{
				display: inline-block;
			}
			.navbar-brand{
				.logo{
					margin-top: 5px;
					//transform: rotate(270deg);
				}
				.brand-name{
					display: none;
					&:after{
						display: none;
					}
				}
			}
			.badge.badge_nav{
				margin: 5px 15px 5px 10px;
			}
			.number-of-synchronized-interviews{
				display: block;
				float: right;
				padding: 15px 10px;
				color: $white;
				&:hover, &:focus{
					text-decoration: none;
					color: white;
				}
			}
		}
		.navbar-toggle{
			z-index: 25;
			margin-right: 0;
		}
		&.navbar-fixed-top {
			.navbar-collapse{
				max-height: 100%;
				top: 0;
				left: 0;
				z-index: 10;
				display: none;
				position: fixed;
				@include size(100%, 100%);
				background: black;
				margin: 0;
				padding: 40px 5%;
				li {
					&.active a{
						color: white;
						&:hover, &:focus{
							background-color: rgba(255, 255, 255, 0.4);
						}
					}
					&> a{
						border-radius: 5px;
						padding: 15px 10px;
						text-align: left;
						color: $gray_light;
						&:hover, &:focus{
							color: white;
						}
					}
					a .caret{
						top: 0;
						left: 0;
						position: relative;
						margin: 0;
						margin-left: 10px;
					}
					.dropdown-menu li {
						a{
							padding: 15px 10px;
							&:hover, &:focus{
								font-family: "RobotoBold";
							}
						}
						&.active {
							a{
								border-radius: 5px;
								background-color: rgba(42, 129, 203, 0.5);
								&:hover, &:focus{
									font-family: "RobotoBold";
									background-color: rgba(42, 129, 203, 1);
								}
							}
						}
					}
					.btn-icon {
						margin: 21px 12px;
					}
				}
			}
			.navbar-right .badge.badge_nav{
				top: 0;
				left: 0;
				position: relative;
				margin-right: 10px;
			}
			.navbar-nav > .active > a,
			.navbar-nav > .active > a:hover,
			.navbar-nav > .active > a:focus{
				background-color: #333;
			}
		}
	}
	.icon-bar{
		@include transition();
	}
	.navbar-inverse .navbar-toggle{
		background-color: transparent;
		border: none;
	}
	.top-animate {
	@include rotate(225deg);
	position: relative;
	top: 6px;
	}
	.mid-animate { opacity: 0; }
	.bottom-animate {
		bottom: 6px;
		position: relative;
		@include rotate(-225deg);
	}
	.language{
		background-position-y: 5px;
	}
	body:not(.wide-navbar){
			.navbar-web-interview .nav.navbar-right > li,
		.navbar-web-interview .nav.navbar-right > li.help-link,
		.navbar-web-interview .nav.navbar-left{
			width: 100%;
			max-width: 100%;
			text-align: left;
		}
	}

}
@media (max-width: $screen-xs-min) {
	.navbar{
		.navbar-header{
			& > .interview-ID{
				display: inline-block;
				padding-left: 5px;
				padding-right: 5px;
			}
			.active-page{
			    max-width: 30%;
			}
		}
		.container-fluid{
			padding: 0px 12px !important;
		}
	}
}